<template>
  <div class="shop-cart">
    <div class="content" @click.stop="toggleList">
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="logo" :class="{'highlight': this.$store.getters.getAllFoodsCount.count>0}">
            <i class="icon-shopping_cart" :class="{'highlight': this.$store.getters.getAllFoodsCount.count>0}"></i>
          </div>
          <div class="num">
            <bubble :num="this.$store.getters.getAllFoodsCount.count"></bubble>
          </div>
        </div>
        <div class="price">￥{{this.$store.getters.getAllFoodsCount.amount}}</div>
        <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
      </div>
      <div class="content-right" @click="goPayMoney">
        <div class="pay" :class="payclass">
          {{ payDesc }}
        </div>
      </div>
    </div>
    <div class="drop-ball">
      <drop-ball></drop-ball>
    </div>
  </div>
</template>

<script>
  import Bubble from 'components/bubble/bubble'
  import DropBall from 'components/drop-ball/drop-ball'
  
  export default {
    props: {
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        // 购物车列表是否隐藏的标志位：true = 隐藏，false = 展开显示
        listFold: true
      }
    },
    computed: {
      getAllCount() {
        return this.$store.getters.getAllFoodsCount.amount
      },
      payDesc() {
        if (this.getAllCount === 0) {
          return `￥${this.minPrice}元起送`
        } else if (this.getAllCount < this.minPrice) {
          let diff = this.minPrice - this.getAllCount
          return `还差￥${diff}元起送`
        } else {
          return '去结算'
        }
      },
      payclass() {
        if (!this.getAllCount || this.getAllCount < this.minPrice) {
          return 'not-enough'
        } else {
          return 'enough'
        }
      },
      ballFlagCal() {
        if (this.$store.getters.getBottonRect.ballFlag) {
          this.ballFlag = !this.ballFlag
          // console.log('1----' + this.ballFlag)
        }
          return this.ballFlag
      }
    },
    created () {
      // 在生命周期创建的时候，就让列表默认隐藏
      this.listFold = true
    },
    methods: {
      toggleList() {
        if (this.listFold) {
          if (!this.$store.getters.getAllFoodsCount.count) {
            return
          }
          this.listFold = false
          this._showShopCartList()
        } else {
          this.listFold = true
          this._hideShopCartList()
        }
      },
      _showShopCartList() {
        this.ShopCartListComp = this.ShopCartListComp ||this.$createShopCartList({
          // $props: {
          //   // selectedFoods: 'this.$store.state.car'
          //   selectedFoods: 'this.$store.getters.getSelectedFoods()'
          // }
          $events: {
            hide: () => {
              this.listFold = true
            }
          }
        })
        // console.log(this.ShopCartListComp)
        this.ShopCartListComp.show()
      },
      _hideShopCartList() {
        this.ShopCartListComp.hide()
      },
      goPayMoney() {
        if (this.getAllCount < this.minPrice) {
          return
        }
        this.$createDialog({
          title: '支付',
          content: `您共需支付${this.getAllCount + this.deliveryPrice}元`,
        }).show()
        this.listFold = false
        this._showShopCartList()
      }
    },
    components: {
      Bubble,
      DropBall
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/mixin"
  @import "~common/stylus/variable"
  .shop-cart
    height 100%
    .content
      display: flex
      background-color $color-background
      font-size: 0
      color: $color-light-grey
      .content-left
        flex: 1
        // background-color #141d27
        .logo-wrapper
          display inline-block
          vertical-align top
          position relative
          top -10px
          left: 12px
          width: 56px
          height: 56px
          border-radius: 50%
          box-sizing: border-box
          background-color: $color-background
          .logo
            width: 44px
            height: 44px
            border-radius: 50%  
            text-align: center
            background-color: $color-dark-grey
            margin: 6px auto
            &.highlight
              background-color: $color-blue
            .icon-shopping_cart
              line-height: 44px
              font-size: $fontsize-large-xxx
              color: $color-light-grey
              &.highlight
                color: $color-white
          .num
            position absolute
            top 0
            right 0
            // font-size 12px
        .price
          display inline-block
          vertical-align top
          margin 12px 12px 12px 20px
          line-height 24px
          font-size $fontsize-large
          font-weight 700
          &.highlight
            color: $color-white
        .desc
          display inline-block
          vertical-align top
          margin 12px 0
          padding 0 12px
          box-sizing border-box
          border-left 1px solid rgba(255, 255, 255, 0.1)
          line-height 24px
          font-size $fontsize-small-s         
      .content-right
        flex: 0 0 105px
        width: 105px
        .pay
          height: 48px
          line-height: 48px
          font-weight: 700
          font-size: 14px
          text-align: center
          &.not-enough
            background-color: $color-dark-grey
          &.enough
            color: $color-white
            background-color: $color-green
    .drop-ball
      position: absolute
      left: 32px
      bottom: 22px        
</style>
